import axios from '../util/axios';
import format from '../util/format';
import React, { Component } from 'react';
import styled from 'styled-components';
import '../css/style.css'

const CollectDiv = styled.div`
            box-sizing: border-box;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
        .head{
            height: 40px;
            width: 100%;
            background-color: #dd3635;
            display: flex;
            box-sizing: border-box;
            padding-left: 10px;
            padding-right: 10px;
            align-items: center;
        }
        .content{
            flex: 1;
            overflow-y: auto;
            box-sizing: border-box;
            padding-left: 10px;
            padding-right: 10px;
        }


        .content>ul>li{
            display: flex;
            height: 100px;
            border-bottom: 1px solid #f3f3f3;
            box-sizing: border-box;
            padding-top: 14px;
            padding-bottom: 14px;
        }
        .content>ul>li:last-child{
            border-bottom: 0;
        }

        .info{
            flex: 1;
            display: inline-flex;
            flex-direction: column;
            justify-content: space-between;
            margin-right: 10px;
        }


        .title{
            font-size: 18px;
            color: #222222;
            overflow:hidden;
            display:-webkit-box;
            text-overflow:ellipsis;
            -webkit-line-clamp:2; 
            -webkit-box-orient:vertical; 
            white-space:normal;
        }

        .something{
            color: #a5a5a5;
            font-size: 12px;
        }


        .img{
            width: 115px;
            height: 72px;
            overflow: hidden;
        }

        .img>img{
            width: 100%;
        }

        .back_btn{
            color: #ffffff;
            font-size: 16px;
        }
        .head span{
            color: #ffffff;
            font-size: 16px;
            
            margin:0 auto;
        }
        .back_btn::before{
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            border-left: 3px solid #ffffff;
            border-top: 3px solid #ffffff;
            transform: rotate(-45deg);
        }
`

class Collect extends Component {
    state = {
        list: []
    }
    componentDidMount() {
        let uu = localStorage.getItem('userinfo')
        if (uu) {
            uu = JSON.parse(uu)
        }
        axios.post('/clist', { uid: uu._id }).then(res => {
            if (res.status === 'success') {
                this.setState({
                    list: res.data
                })
            }
        }).catch(err => {
            console.log(err)
        })
    }
    goinfo = (id) => {
        this.props.history.push('/newsinfo/' + id)
    }
    render() {
        return (
            <CollectDiv>
                <div className="head">
                    <a className="back_btn" onClick={() => {
                        this.props.history.replace('/my')
                    }}>返回</a>  <span>全部收藏（{this.state.list.length}）</span>
                </div>
                <div className="content">
                    <ul>
                        {
                            this.state.list.map((item, index) => {
                                if (item.aid.type === '财经') {
                                    return (
                                        <li key={item.aid._id} onClick={this.goinfo.bind(this, item.aid._id)}>
                                            <div className="info">
                                                <div className="title">{item.aid.title}</div>
                                                <div className="something">
                                                    <span className="m_r10">{item.aid.media}-{item.aid.type}</span>
                                                    <span>{format.toYMD(item.aid.pubtime)}</span>
                                                </div>
                                            </div>
                                            {
                                                item.aid.img && item.aid.img !== "none" ? <div className="img">
                                                    <img src={item.aid.img} />
                                                </div> : ''
                                            }

                                        </li>
                                    )
                                } else {
                                    return (
                                        <li key={item.aid._id} onClick={this.goinfo.bind(this, item.aid._id)}>
                                            <div className="info">
                                                <div className="title">{item.aid.title}</div>
                                                <div className="something">
                                                    <span className="m_r10">{item.aid.source}-{item.aid.type}</span>
                                                    <span>{format.toYMD(item.aid.time)}</span>
                                                </div>
                                            </div>
                                            {
                                                item.aid.img && item.aid.img !== "none" ? <div className="img">
                                                    <img src={item.aid.img} />
                                                </div> : ''
                                            }
                                        </li>
                                    )
                                }

                            })
                        }


                    </ul>
                </div>
            </CollectDiv>
        );
    }
}

export default Collect;
